<template>
  <div class="page">
    <m-header :title="langText&&langText.tradingcenter" >
      <i class="iconfont iconiconjia mark" 
      style="color:#fff;text-align: right;position:absolute;right:20px;top:0;font-weight: 550;"
      @click="gray = !gray"></i>
    </m-header>
    <section class="body">
      
      <div class="bgc">
        <div class="bgc_1"></div>
        <div class="bgc_2"></div>
      </div>

      <div class="top">
          <div class="left"  @click="$router.push({name:'Buy'})" >
              <i class="iconfont iconmaidan2 mark"></i>
              <p>{{langText&&langText.mypay}}</p>
          </div>
          <div class="center"></div>
          <div class="right" @click="$router.push({name:'Sell'})">
              <i class="iconfont iconmaidan3 mark"></i>
              <p>{{langText&&langText.mysellorder}}</p>
          </div>
      </div>

      <!-- <button class="buy" @click="$router.push({name:'Listcentre',query:{type:'buy'}})">{{langText&&langText.buy}}</button>
      <button class="sell" @click="$router.push({name:'Listcentre',query:{type:'sell'}})">{{langText&&langText.sell}}</button> -->
      <button class="buy" @click="$router.push({name:'Listcentre',query:{type:'sell'}})">{{langText&&langText.buy}}</button>
      <button class="sell" @click="$router.push({name:'Listcentre',query:{type:'buy'}})">{{langText&&langText.sell}}</button>

      <div class="line">
        <div class="top-box">
            <span class="title">{{langText&&langText.tplc}}</span>
            <!-- <div class="top_bgc"></div> -->
        </div>
        <div class="line-title">{{langText&&langText.fc}}/{{langText&&langText.usdt}}</div>
        <div id="myChart" :style="{width: '100%', height: '250px'}"></div>
      </div>

      <div class="gray" v-show="gray" @click="gray = !gray">
        <div class="gray-top"></div>
        <div class="gray-box">
          <p @click="$router.push({name:'NewBill',query:{type:'buy'}})">{{langText&&langText.newbuyorder}}</p>
          <p @click="$router.push({name:'NewBill',query:{type:'sell'}})">{{langText&&langText.newsellorder}}</p>
        </div>
      </div>

    </section>
    <m-Footer></m-Footer>
    <m-load ref="load"></m-load>

  </div>
</template>
<script>
import { Init, Index, Owner,Trade,Base  } from '@/server/server.js';
import {Util,Load} from '@/assets/commonjs/utils.js';
import {mapGetters} from 'vuex';
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";
export default {
  data(){
      return {
        gray:false,
        arr1:[],
        arr2:[],
        allTxt:null,
        langText:null,
      }
  },
  created () {
    sessionStorage.setItem("btmNav", 3);
  },
  mounted() {
    this.getlang();
    this.initData();
    this.fcRate();
    setTimeout(()=>{
      this.drawLine();
    },1000)
  },
  computed: {
    ...mapGetters(['uid','api','getLangId'])
  },
  methods: {
    initData(){
        this.id = this.$route.query.id;
        this.allTxt = Object.assign({},MyTxt,TradeTxt)
    },
    getlang(){
      Base.getlang().then(res=>{
        if(res.code==1){
          this.langText = Object.assign({},res.data.tradingcenter,res.data.menu,res.data.register,res.data.currency,res.data.mine)
          setTimeout(()=>{
            
            localStorage.setItem('tradingcenter',JSON.stringify(this.langText));
          },200)
        }else{
          mui.toast(res.msg)
        }
      })
    },
    fcRate(){
      Trade.fcRate().then(res=>{
        if(res.code==1){
          res.data.splice(-5,5).forEach((v,i)=>{
            this.arr1.push(v.date.substring(5,7)+'/'+v.date.substring(8,10));
            this.arr2.push(v.price)
          })
          // console.log(this.arr1,this.arr2)
        }else{
          mui.toast(res.msg)
        }
      })
    },
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            color:'#4EB6AD', //  color=>线条颜色 bgc=>div背景颜色
            // title: { text: 'FC/USDT' },
            tooltip: {},
            xAxis: {
                // data: ["9/11","9/12","9/13","9/14","9/15"],
                data: this.arr1,
                axisTick: { show:false },
                axisLine: { show:false },
                axisLabel: {
                  color: "#999999" //刻度线标签颜色
                }
            },
            yAxis: { 
                axisTick: { show:false },
                axisLine: { show:false },
                textStyle:{
                  color:'red'
                },
                axisLabel: {
                  color: "#999999" //刻度线标签颜色
                },
                splitLine: {     //网格线
                  // "show": false
                  color:'#416180'
                }

            },
            series: [{
                name: '销量',
                type: 'line',
                symbol: 'none',
                // data: [380, 175, 50, 215, 205],
                data: this.arr2,
                // areaStyle:{
                //     // 填充
                //     normal:{
                //         color:'rgba(78,182,173,0.1)',
                //     }
                // },
                areaStyle: {
                    color:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            // color: '#F09538'
                            color: 'rgba(78,182,173,0.2)'
                        }, {
                            offset: 1,
                            // color: '#35322F'
                            color: 'rgba(78,182,173,0)'
                        }])
                }
            }]
        });
    },
    goTo(){
      // console.log(123)
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  line-height: 36px;
  background-color: @bg-color;
  p{ color: #000; }
  .bgc{
    width: 100%;
    height: 0;
    position: fixed;
    z-index: -99;
    .bgc_1{
      width: 100%;
      // position: absolute;
      background-color: #4EB6AD;
      height: 190px;
    }
    .bgc_2{
      width: 140%;
      background-color: #4EB6AD;
      border-radius: 100%;
      height: 200px;
      margin-left: -20%;;
      margin-top: -150px;
      // bottom: 0;
    }
  }
  .top{
    width:710px;
    height:250px;
    background:rgba(255,255,255,1);
    box-shadow:0px 6px 10px 0px rgba(78,182,173,0.15);
    border-radius:10px;
    margin: 80px 20px 30px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    p{
      font-size:34px;
      font-weight:400;
      color:rgba(51,51,51,1);
      margin-top: 20px;
    }
    .left{
      flex: 1;
      padding-top: 80px;
      .mark{
        color: #4EB6AD;
        font-size: 76px;
        margin-top: 50px;
      }
    }
    .right{
      flex: 1;
      padding-top: 80px;
      .mark{
        color: #8498E3;
        font-size: 76px;
        margin-top: 50px;
      }
    }
    .center{
      width: 1px;
      height: 146px;
      margin-top: 52px;
      background-color: #979797;
    }
  }
  .buy{
    width:710px;
    height:88px;
    background:rgba(78,182,173,1);
    border-radius:10px;
    margin-left: 20px;
  }
  .sell{
    width:710px;
    height:88px;
    background:rgba(132,152,227,1);
    border-radius:10px;
    margin-left: 20px;
    margin-top: 30px;
  }
  .line{
    width:710px;
    height:530px;
    background:rgba(255,255,255,1);
    border-radius:10px;
    margin: 30px 20px;
    padding-top: 30px;
    position: relative;
    .top-box{
      text-align: center;
      .title{
        width: auto;
        font-size:40px;
        font-weight:550;
        color:rgba(78,182,173,1);
        line-height:56px;
        position: relative;
        &::after{
          content: '';
          background:rgba(78,182,173,0.2);
          height: 20px;
          position: absolute;
          bottom: 0;
          width: 120%;
          left: -10%;
        }
      }
    }
    .line-title{
      // margin-bottom: -100px;
      position: absolute;
      top: 118px;
      left: 20px;
    }
  }
  .gray{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    background-color: rgba(0,0,0,0.1);
    .gray-top{
      width: 20px;
      height: 20px;
      background-color: #fff;
      transform:rotate(45deg);
      position: absolute;
      right: 40px;
      top: 90px;
    }
    .gray-box{
      background-color: #fff;
      // width: 200px;
      height: 166px;
      position: absolute;
      right: 25px;
      top: 100px;
      padding: 12px;
      padding-left: 24px;
      >p{
        color: #000;
        margin: 20px 24px 0 0;
        padding-bottom: 12px;
        border-bottom: 1px solid #eee;
        &:last-child{
          border-bottom: none;
        }
      }
    }
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #4EB6AD !important;
    span{
      color: #fff;
    }
    .center{
      color: #fff;
    }
  }
}
</style>
<style lang="less">
._v-container {
  height: 300px!important;
}
._v-container>._v-content>.loading-layer .spinner-holder .spinner, ._v-container>._v-content>.pull-to-refresh-layer .spinner-holder .spinner{
    margin-top: 0!important;
    fill: white!important;
    stroke: white!important;
    z-index: 1;
}
</style>
